<template>
  <div class='hrTargetManage' >
      <el-row class='first-title'>
        <div class="lf">
          <h3>各职级人均收入</h3>
        </div>
      </el-row>
      <el-row class="third-card">
          <div class="table-container">
            <div class="handle-table">
                <div class="left">
                    <el-form :inline="true" :model="formInline">
                        <el-form-item label="请选择年份：">
                            <el-select
                                v-model="formInline.year"
                                @change='onChangeYear'>
                                <el-option
                                    v-for='item in formInline.yearOption'
                                    :key='item.year'
                                    :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">{{formInline.btTypeName}}</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <el-table
                :data="mainTable.showList"
                style="width: 100%"
                v-show="formInline.btTypeName === '编辑'? true: false"
                >
                <el-table-column
                    type="index"
                    width="55">
                </el-table-column>
                <el-table-column
                    v-for="column in mainTable.mainColumns"
                    :key='column.prop'
                    :prop='column.prop'
                    :label='column.label'
                    :width='column.width'
                    :formatter="column.formatter">
                    <template scope='scope'>
                        <span :class="scope.row[column.prop]==='未填写'?'unWrite':''">
                            {{scope.row[column.prop]}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                :data="mainTable.showList"
                style="width: 100%"
                v-show="formInline.btTypeName === '保存'? true: false"
                >
                <el-table-column
                    type="index"
                    width="55">
                </el-table-column>
                <el-table-column
                    v-for="column in mainTable.mainColumns"
                    :key='column.prop'
                    :prop='column.prop'
                    :label='column.label'
                    :width='column.width'
                    :formatter="column.formatter">
                    <template scope='scope'>
                        <span v-show="column.prop === 'descrshort'? true: false">
                            {{scope.row[column.prop]}}
                        </span>
                        <el-select
                            size='small'
                            v-model="scope.row[column.prop]"
                            v-show="column.prop === 'unit'? true: false">
                            <el-option
                                label="万人民币"
                                value="万人民币"></el-option>
                            <el-option
                                label="万港币"
                                value="万港币"></el-option>
                        </el-select>
                        <!-- <el-input
                            size='small'
                            v-model.number="scope.row[column.prop]"
                            v-show="(column.prop === 'unit' || column.prop === 'descrshort')? false: true">
                        </el-input> -->
                        <input
                            type="number"
                            class="small"
                            v-model.number="scope.row[column.prop]"
                            v-show="(column.prop === 'unit' || column.prop === 'descrshort')? false: true">
                    </template>
                </el-table-column>
            </el-table>
         </div>
      </el-row>
  </div>
</template>

<script>
    import Vue from 'vue'
    import myPagination from '@/components/public/pagination'
    import searchBox from '@/components/public/search-box'
    import {
        MessageBox,
        Message,
        Button,
        ButtonGroup,
        Switch,
        Select,
        Input,
        Col,
        Row,
        Dialog,
        Checkbox,
        Radio,
        RadioGroup,
        RadioButton,
        Option,
        Table,
        TableColumn,
        Form,
        FormItem} from 'element-ui'
    // Vue.use(MessageBox)
    // Vue.use(Message)
    Vue.use(Button)
    Vue.use(ButtonGroup)
    Vue.use(Switch)
    Vue.use(Select)
    Vue.use(Input)
    Vue.use(Col)
    Vue.use(Row)
    Vue.use(Dialog)
    Vue.use(Checkbox)
    Vue.use(Radio)
    Vue.use(RadioGroup)
    Vue.use(RadioButton)
    Vue.use(Option)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Form)
    Vue.use(FormItem)

    export default {
      data() {
        return {
            formInline:{
                year: '',
                btTypeName:'编辑',
                yearOption:[]
            },
            mainTable:{
                showList:[],
                editwListCopy:[],
                mainColumns:[]
            }
        }
      },
      methods: {
        confirmModal:function(title,content,type,sureCB,cancelCB){
            MessageBox.confirm(content, title, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: type? type: 'warning'
            }).then(() => {
                if(sureCB){
                    sureCB()
                }
            }).catch(() => {
                if(cancelCB){
                    cancelCB()
                }
            });
        },
        isEqualObject:function(a,b){
            //判断两个对象是否内容相等
            var propsA = Object.getOwnPropertyNames(a),
            propsB = Object.getOwnPropertyNames(b);
            if(propsA.length != propsB.length){
                return false;
            }
            for(var i=0;i<propsA.length;i++){
                var propName=propsA[i];
                if(a[propName] !== b[propName]){
                    return false;
                }
            }
            return true;
        },
        // 修改年份
        onChangeYear:function(v){
            this.ajaxPost('/perRank/onchangePerRankIncomeList',{year:v},this.getTableDataCB)
        },
        // 获取表格数据
        getTableData:function(year){
            this.ajaxPost('/perRank/getPerRankIncomeList',null,this.getTableDataCB)
        },
        getTableDataCB:function(res){
            if (res.data.status === 1) {
                this.mainTable.showList = res.data.datas.mainList
                this.mainTable.editwListCopy = JSON.parse(JSON.stringify(res.data.datas.mainList))
                this.formInline.year = res.data.datas.checkYear
                if(res.data.datas.years){
                    this.formInline.yearOption = []
                    for(var i=0; i<res.data.datas.years.length; i++){
                        this.formInline.yearOption.push({
                            label:res.data.datas.years[i],
                            value:res.data.datas.years[i]
                        })
                    }
                }
                this.mainTable.mainColumns = []
                this.mainTable.mainColumns.push({
                    prop:'descrshort',
                    label:'业务单位'
                })
                this.mainTable.mainColumns.push({
                    prop:'unit',
                    label:'货币单位'
                })
                for(var i=0; i<res.data.datas.perRankLise.length; i++){
                    this.mainTable.mainColumns.push({
                        prop:res.data.datas.perRankLise[i].rankId,
                        label:res.data.datas.perRankLise[i].rankName
                    })
                }
            }
        },
        // 编辑表格数据
        onSubmit:function(){
            if(this.formInline.btTypeName === '编辑'){
                this.ajaxPost('/perRank/getPerRankIncomeListByYear',{year:this.formInline.year},this.onSubmitCB)
            }
            if(this.formInline.btTypeName === '保存'){
                var obj = JSON.parse(JSON.stringify(this.mainTable.showList))
                var obj2 = JSON.parse(JSON.stringify(this.mainTable.editwListCopy))
                var data = []
                var mid, params
                for(var i=0; i<obj.length ;i++){
                    mid = false
                    for(var j=0; j<obj2.length; j++){
                        if(obj[i].setid === obj2[j].setid){
                            mid = this.isEqualObject(obj[i],obj2[j])
                            if(!mid){
                                data.push(obj[i])
                            }
                            break
                        }
                    }
                }
                params = {
                    mainList: data,
                    year:this.formInline.year
                }
                if (!data || data.length === 0) {
                	 Message.success('修改成功!');
	                if(this.formInline.btTypeName === '编辑'){
	                    this.formInline.btTypeName = '保存'
	                    this.getTableDataCB(res)
	                    return
	                }
	                if(this.formInline.btTypeName === '保存'){
	                    this.formInline.btTypeName = '编辑'
	                    
	                    this.onChangeYear(this.formInline.year)
	                    return
	                }
                	 return;
                }
                
                
                
                this.ajaxPost('/perRank/savePerRankIncomeList',params,this.onSubmitCB)
            }
        },
        onSubmitCB:function(res){
            if(res.data.status === 1){
                if(this.formInline.btTypeName === '编辑'){
                    this.formInline.btTypeName = '保存'
                    this.getTableDataCB(res)
                    return
                }
                if(this.formInline.btTypeName === '保存'){
                    this.formInline.btTypeName = '编辑'
                    Message.success('保存成功!')
                    this.onChangeYear(this.formInline.year)
                    return
                }
            }
        },
        ajaxPost:function(url,params,callback){
            var self = this;
            this.Axios.Post(url,params)
                .then(function(res){
                    if(callback){
                        callback(res,self)
                    }
                })
        }
      },
      computed:{
      },
      filters:{
      },
      mounted: function () {
        this.getTableData()
      },
      components: {
      },
      watch:{
      }
    }
</script>

<style scoped>
    input{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        color: #1f2d3d;
        font-size: inherit;
        height: 36px;        
        line-height: 1;
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        outline: 0;
        padding: 3px 10px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    input.small{
        height: 30px;
    }
    input.mini{
        height: 24px;
    }
    .hrTargetManage .first-title h3{
        font-size: 24px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: 500;
        line-height: 1.1;
    }
    .hrTargetManage .first-title .search{
        float: right;
        margin-top: 15px;
    }
    .hrTargetManage .second-sec{
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #d2d6de;
        margin-bottom: 50px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-top-color: #00a65a;
        color:#444;
        font-family: "Microsoft YaHei",museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
    }
    .hrTargetManage .table-container{
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #d2d6de;
        margin-bottom: 20px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-top-color: #00a65a;
        background-color:#fff;
        padding: 0 10px;
        min-height: 400px;
    }
    .hrTargetManage .handle-table{
        clear: both;
        padding:20px 20px 30px 20px;
        border-bottom: 1px solid #dfe6ec;
    }
    .hrTargetManage .selectSet{
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      position: relative;
      clear: both;
      
    }
    .hrTargetManage .selectSet .default{
      float: left;
      background-color: #f4f4f4;
      color: #444;
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      position: relative;
      z-index:1;
    }
    .hrTargetManage .selectSet .alt{
        margin-right:-1px;
        
    }
    .hrTargetManage .selectSet a:hover{
      z-index:4;  
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    .hrTargetManage .selectSet .alt{
        margin-right:-1px;
    }

    .hrTargetManage .selectSet .default:first-child:not(:last-child){
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        
    }
    .hrTargetManage .selectSet .default:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .hrTargetManage .third-card .unWrite{
        color: #f8ac59;
    }
    .hrTargetManage .third-card .collapse-card .box-title{
        display: inline-block;
        font-size: 18px;
        color: #444;
        font-weight: 500;
        margin: 0;
        line-height: 1;
    }
    .hrTargetManage .third-card .collapse-card .collapse-container {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor:pointer;
    }
    .hrTargetManage .third-card .collapse-card  .collapse {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 0px;
        padding: 5px;
        font-size: 12px;
        background: transparent;
        color: #97a0b3;
    }
    .hrTargetManage .totalNum{
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        position:relative;
    }
    .hrTargetManage .paginationDiv{
        padding: 10px 0;
        margin-top: 20px;
    }
    .lookModal li{
        padding:  10px 40px 10px 20px;
    }
    .lookModal .title{
        float: left;
        width: 80px;
        text-align: right;
        font-weight: bold;
    }
    .lookModal .value{
        margin-left: 100px;
        border-bottom: 1px solid #eee;
        padding: 2px 10px;
        min-height: 24px;
    }
    .editModal .editModalDiv{
        padding: 0 40px 0 20px;
    }
</style>
<style>
</style>
